<template>
  <Teleport to="body">
    <XtxDialog :title="`${ form.id ? '修改': '添加' }收货地址`" v-model="dialogVisible">
      <div class="address-edit">
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input v-model="form.receiver" class="input" placeholder="请输入收货人" />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input  v-model="form.contact" class="input" placeholder="请输入手机号" />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <XtxCity placeholder="请选择所在地区" v-model:fullLocation="form.fullLocation" @change="changeCty"  />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input  v-model="form.address" class="input" placeholder="请输入详细地址" />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input v-model="form.postalCode" class="input" placeholder="请输入邮政编码" />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input v-model="form.addressTags" class="input" placeholder="请输入地址标签，逗号分隔" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <XtxButton @click="dialogVisible = false" type="gray" style="margin-right:20px">取消</XtxButton>
        <XtxButton @click="submit()" type="primary">确认</XtxButton>
      </template>
      <h2>{{ form }}</h2>
    </XtxDialog>
  </Teleport>
</template>

<script>
import { reactive, ref } from 'vue'
import { addAddress, editAddress } from '@/api/order'
import { Message } from '@/components/library/Message'
export default {
  name: 'AddressEdit',
  emits: ['on-success'],
  setup (props, { emit }) {
    const dialogVisible = ref(false)
    // 打开函数
    const open = (showAddress) => {
      dialogVisible.value = true
      // console.log(showAddress)
      for (const key in form) {
        if (key !== 'isDefault') {
          form[key] = showAddress[key]
        }
      }
    }

    // 添加收获地址所需的请求参数
    const form = reactive({
      id: '', // 用于修改地址的id
      fullLocation: '', // 只是用于前端显示的字段，不用于请求发送
      receiver: '', // 收货人姓名
      contact: '', // 联系方式
      provinceCode: '', // 所在省份编码
      cityCode: '', // 所在城市编码
      countyCode: '', // 所在区/县编码
      address: '', // 详细地址
      postalCode: '', // 邮政编码
      addressTags: '', // 地址标签,以英文逗号分割
      isDefault: 0 // 是否为默认，0为是，1为否
    })

    // 选择地区组件子传父
    const changeCty = (val) => {
      // 用于前端界面展示的地址，通过 v-model:fullLocation 实现了
      // form.fullLocation = val.fullLocation
      // 添加地址时所需的省市区编码
      form.provinceCode = val.provinceCode
      form.cityCode = val.cityCode
      form.countyCode = val.countyCode
    }

    // 提交表单
    const submit = async () => {
      try {
        if (!form.id) {
          // 情况1：没有id，调用添加地址的接口
          await addAddress(form)
        } else {
          // 情况2：有id，调用修改地址的接口
          await editAddress(form)
        }
        // 🔔成功提示
        Message({ message: `${form.id ? '更新' : '添加'}收货地址成功`, type: 'success' })
        // 操作成功后，隐藏对话框
        dialogVisible.value = false
        // 🔔 通知父组件，需要获取最新的地址列表
        emit('on-success', form.id)
      } catch (error) {
        // 成功提示
        Message({ message: error.response.data.message, type: 'error' })
      }
    }

    return { dialogVisible, open, form, changeCty, submit }
  }
}
</script>

<style scoped lang="less">
.xtx-dialog {
  :deep(.wrapper){
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.xtx-form {
  padding: 0;
  input {
    outline: none;
    &::placeholder {
      color: #ccc;
    }
  }
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
</style>
